<div id="simple-table" class="page-layout simple fullwidth doc-page element-doc-page">

    <!-- HEADER -->
    <div class="header md-accent-bg" layout="row" layout-align="space-between">
        <div layout="column" layout-align="center start">
            <div class="breadcrumb" layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-home" class="s16"></md-icon>
                <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
                <span class="parent">Tables</span>
            </div>
            <div class="title">Datatable</div>
        </div>

        <div layout="row" layout-align="start center">
            <md-button class="md-raised reference-button"
                       href="https://l-lin.github.io/angular-datatables"
                       target="_blank">
                <md-icon md-font-icon="icon-link"></md-icon>
                <span>Reference</span>
            </md-button>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <div class="md-title mb-32">Zero Configuration</div>
        <div class="white-bg md-whiteframe-4dp">
            <table class="dataTable row-border hover" datatable="ng" dt-options="vm.dtOptions">
                <thead>
                    <tr>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Name</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Position</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Office</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Age</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Start Date</span>
                            </div>
                        </th>
                        <th class="secondary-text">
                            <div class="table-header">
                                <span class="column-title">Salary</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in ::vm.employees">
                        <td>{{ employee.name }}</td>
                        <td>{{ employee.position }}</td>
                        <td>{{ employee.office }}</td>
                        <td>{{ employee.age }}</td>
                        <td>{{ employee.startDate }}</td>
                        <td>{{ employee.salary }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
    <!-- / CONTENT -->

</div>